上一篇不小心介紹了 airbnb 風格不推薦的 for-of 語法，我們來仔細看看 ESLint airbnb 的規則到底是怎麼說的：

11.1 不要使用迭代器。更好的做法是使用 JavaScript 的高階函式，像是 map() 及 reduce()，替代如for-of 的迴圈語法。

竟然這樣，今天就來練習 map() 處理陣列的用法唄！

map() 特色

• 會透過函式內所回傳的值組合成一個新的陣列
• 並不會改變原陣列
• 回傳數量會等於原始陣列的長度
• 如果不回傳則是 undefined

簡單來說就是我們若用陣列使用 map() 方法呼叫函式的話，就可以讓陣列中每個元素執行完該函式後，將每個元素的執行結果回傳到一個新的陣列。

使用語法

const newArr = arr.map(function (value, index, array){
  //...
});

會使用回調函式（callback）與三個參數，說明如圖：

範例

假如我是一個包租婆，陣列A儲存我每間房收的房租，但我最近比較缺錢所以打算漲個價斂財，每間房子直接改收兩倍的租金，這時候就可以使用 map() 方法快速計算每間房子漲價後的房租，並儲存在B陣列中：

let A = [9000, 8500, 5500, 6500];
let B = A.map(function (value, index, array) {
    return value*2;
});

console.log(A) // [9000, 8500, 5500, 6500] - 原陣列不會被修改
console.log(B) // [18000, 17000, 11000, 13000] - 發財摟 ^____^

使用箭頭函示的縮寫就會變這樣

let A = [9000, 8500, 5500, 6500];
let B = A.map(item => item*2);
console.log(B) // [18000, 17000, 11000, 13000] - 還是發財摟 ^____^

當啷～得到一樣的結果囉！是不是非常的簡短感覺好像很厲害呢！還沒使用過的朋友們下次可以試試看歐！

【小補充】

map() 方法使用起來跟 forEach() 方法非常類似，最大的區別就是 forEach() 會修改原本的陣列，而map() 方法可以回傳一個新的陣列，並保有原本的舊陣列，另外 forEach() 並不會回傳任何東西，所以寫在 return 裡的東西不會有作用哦！

foreach() 範例

沒有 return ：

let A = [9000, 8500, 5500, 6500];
let B = A.map(function (value, index, array) {
    return value*2; // forEach 沒有在 return 的，所以不會有作用
});
console.log(B); // undefined

想要達到一樣的結果可以這樣寫：

let A = [9000, 8500, 5500, 6500];
A.forEach(function (value, index, array) {
    array[index] = value*2;
});
console.log(A); // [18000, 17000, 11000, 13000] - 發財摟 ^____^

參考文章
從ES6開始的JavaScript學習生活
卡斯伯：JavaScript 陣列處理方法 [filter(), find(), forEach(), map(), every(), some(), reduce()]